<%--
  Created by IntelliJ IDEA.
  User: Honphie.$.Won
  Date: 2023/7/1
  Time: 17:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
  <title>修改用户</title>
  <script src="./js/vue.js"></script>
  <script src="./elementui/index.js" type="module"></script>
  <script src="./js/jquery-3.4.1.min.js"></script>
  <link rel="stylesheet" href="./elementui/theme-chalk/index.css">
  <script src="//unpkg.com/element-ui@2.15.13/lib/index.js" ></script>
  <link rel="stylesheet" href="//unpkg.com/element-ui@2.15.13/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
  <el-page-header @back="goBack" content="编辑页面">
  </el-page-header>
  <el-alert v-if="showSuccessAlert" title="操作提示：" type="success" show-icon @close="showSuccessAlert = false">
    修改成功！
  </el-alert>
  <el-alert v-if="showErrorAlert" title="操作提示：" type="error" description="修改失败" show-icon @close="showSuccessAlert = false">
  </el-alert>

  <el-form :model="form" :rules="rules" ref="form" label-width="80px" style="width: 500px;margin: 0 auto;margin-top: 100px">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="form.email"></el-input>
    </el-form-item>
    <el-form-item label="手机号" prop="phone">
      <el-input v-model="form.phone"></el-input>
    </el-form-item>
    <el-form-item label="姓名" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>

    <el-form-item label="角色身份" prop="role">
      <el-select v-model="form.role">
        <el-option
                v-for="item in SelectOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm('form')">提交</el-button>
      <el-button @click="resetForm('form')">重置</el-button>
    </el-form-item>
  </el-form>
</div>
</body>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      SelectOptions: [{
        value: '管理员',
        label: '管理员'
      }, {
        value: '超级管理员',
        label: '超级管理员'
      }],
      form: {
        username: '',
        password: '',
        email: '',
        phone: '',
        name: '',
        role: '',
        id:''
      },
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'}
        ],
        email: [
          {required: true, message: '请输入邮箱', trigger: 'blur'},
          {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
        ],
        phone: [
          {required: true, message: '请输入手机号', trigger: 'blur'},
          {type: 'string', min: 11, max: 11, message: '请输入正确的手机号', trigger: 'blur'}
        ],
        name: [
          {required: true, message: '请输入姓名', trigger: 'blur'},
          {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
        ],
        role: [
          {required: true, message: '请选择角色身份', trigger: 'change'},
        ]
      },
      showSuccessAlert: false,
      showErrorAlert: false
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            $.ajax({
              url: 'Admins_AccountsServlet?tag=Update',
              type: 'post',
              data: this.form,
              success: function (data) {
                if (data) {
                  app.showSuccessAlert = true; // 显示成功提示框
                } else {
                  app.showErrorAlert = true;
                }
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      goBack() {
        parent.vue.iframeUrl = 'Admin.jsp';
      },
      getFormData(){
        // 获取URL参数
        var urlParams = new URLSearchParams(window.location.search);
        // 获取ID参数的值
        var id = urlParams.get('id');
        var _this = this;
        $.get('Admins_AccountsServlet?tag=GetById&id=' + id, function (data) {console.log(data)
           _this.form.username = data.uSER_NAME;
           _this.form.password = data.pASSWORD;
           _this.form.email = data.eMAIL;
           _this.form.phone = data.pHONE;
           _this.form.name = data.nAME;
           _this.form.role = data.rOLE;
           _this.form.id = data.aDMIN_ID;
        })
      }
    },
    mounted() {
      this.getFormData();
    }
  });
</script>
</html>
